<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>利用原生ajax验证用户名是否存在</title>
</head>
<body>
<form action="#" method="post">
    <p>
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username">
        <span id="username_err" style="color: red;display: none;">用户名长度不符合要求或已重复，请重新输入</span>
    </p>
    <p>
        <label for="password">密码：</label>
        <input type="text" name="password" id="password">
        <span id="password_err" style="color: red;display: none;">密码长度不符合要求，请重新输入</span>
    </p>
    <p>
        性别：
        <input type="radio" name="gender" id="man">
        <label for="man">男</label>
        <input type="radio" name="gender" id="woman">
        <label for="woman">女</label>
    </p>

    <p>
        <label for="age">年龄</label>
        <input type="number" name="age" id="age">
    </p>

    <p>
        <input type="submit" value="注册">
    </p>

</form>

<script>
    /*
        1、验证用户名，当用户名输入框失去焦点的生活，判断输入的内容是否符合要求：长度6~12位，不符合要求的弹窗，要求重新输入。
     */
    var usernameInput=document.getElementById("username");
    //onblur事件，是失去焦点事件
    usernameInput.onblur=function () {
        //usernameInput.value 获取用户在输入框中输入的内容，
        //通过trim()消除前后的空格
        let username=usernameInput.value.trim();
        //alert(username)
        if (username.length<6||username.length>12){
            document.getElementById("username_err").style.display='';
        }else {
            document.getElementById("username_err").style.display='none';
        }

        /*
            2、验证用户名是否存在
        */
        //2.1 创建核心对象
        var xhttp;
        if (window.XMLHttpRequest){
            xhttp=new XMLHttpRequest();
        }else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.2 建立连接
        xhttp.open("GET","/JMS2301_03_javaWeb_war/queryByUsernameAjaxServlet?username="+username);
        //2.3 发送请求
        xhttp.send();

        //2.4 获取响应
        xhttp.onreadystatechange=function (){
            if (this.readyState== 4 && this.status == 200){
                //alert(this.responseText)
                if (this.responseText == 'true'){
                    //用户存在，已重复，显示错误信息
                    document.getElementById("username_err").style.display='';
                }else if(this.responseText == 'false') {
                    //未重复，隐藏错误信息
                    document.getElementById("username_err").style.display='none';
                }
            }
        }
    }
</script>


</body>
</html>